<template>
  <div class="interface-edit">
    <h3 class="interface-title" style="margin-top: 10px;margin-bottom:10px">基本信息</h3>
    <el-form ref="form" label-width="100px">
      <!--第一行-->
      <el-row>
        <el-col :span="8">
          <el-form-item label="编号：" required v-if="tyle === 1">
            <el-input placeholder="请输入内容" :disabled="true" v-model="interfaceForm.id">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="名称：" required>
            <el-input placeholder="请输入内容" v-model="interfaceForm.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="分组：" required>
            <el-select v-model="interfaceForm.apiGroupId" placeholder="请选择">
              <el-option v-for="item in interfaceGroupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!--第二行-->
      <el-row>
        <el-col :span="8">
          <el-form-item label="版本号：" required>
            <el-input placeholder="请输入内容" v-model="interfaceForm.version">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="状态：" required>
            <el-select v-model="interfaceForm.status" placeholder="请选择">
              <el-option label="未完成" value="0"></el-option>
              <el-option label="已完成" value="1"></el-option>
              <el-option label="已废弃" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="添加人员：" required>
            <el-input placeholder="请输入内容" v-model="interfaceForm.author">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!--第三行-->
      <el-row>
        <el-col :span="8">
          <el-form-item label="协议：" required>
            <el-select v-model="interfaceForm.protocol" placeholder="请选择">
              <el-option label="HTTP" value="1"></el-option>
              <el-option label="HTTPS" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="路径：" required>
            <el-input placeholder="请输入内容" v-model="interfaceForm.path" class="input-with-select">
              <el-select v-model="interfaceForm.method" slot="prepend" placeholder="请选择" style="width: 120px">
                <el-option label="GET" value="1"></el-option>
                <el-option label="POST" value="2"></el-option>
                <el-option label="PUT" value="3"></el-option>
                <el-option label="DELETE" value="4"></el-option>
              </el-select>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!--第四行-->
      <el-row>
        <el-form-item label="业务描述：">
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="interfaceForm.description">
          </el-input>
        </el-form-item>
      </el-row>
    </el-form>
    <h3 class="interface-title" style="margin-top: 10px;margin-bottom:10px">Request信息</h3>
    <el-tabs type="border-card">
      <el-tab-pane label="请求参数">
        <div>
          <el-button style="margin-bottom: 5px" type="primary" size="small" icon="el-icon-plus" @click="addNewParams()">添加</el-button>
          <el-row :gutter="2" v-for="(item, index) in interfaceForm.params" :key="index">
            <el-col :span="5">
              <el-input v-model="item.name" placeholder="请输入内容"></el-input>
            </el-col>
            <el-col :span="3">
              <el-select v-model="item.must" placeholder="请选择">
                <el-option label="必填" value="必填"></el-option>
                <el-option label="非必填" value="非必填"></el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-input v-model="item.remark" placeholder="请输入内容"></el-input>
            </el-col>
            <el-col :span="7">
              <el-input v-model="item.value" placeholder="请输入内容"></el-input>
            </el-col>
            <el-col :span="3">
              <el-button type="danger" size="small" circle icon="el-icon-delete" @click="interfaceForm.params.splice(index,1)" style="margin-left: 3px"></el-button>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="请求Headers">请求Headers</el-tab-pane>
      <el-tab-pane label="请求Cookies">请求Cookies</el-tab-pane>
    </el-tabs>
    <h3 class="interface-title" style="margin-top: 10px;margin-bottom:10px">Response信息</h3>
    <el-tabs type="border-card">
      <el-tab-pane label="响应示例">
        <vue-json-editor v-model="resultJson.successJson" lang="zh" :mode="'code'">
        </vue-json-editor>
      </el-tab-pane>
    </el-tabs>
    <!--提交按钮-->
    <div style="text-align: center;margin-top: 30px;position: fixed;bottom:0;width:60%;padding-bottom: 15px">
      <el-row>
        <el-button type="primary" icon="el-icon-document-checked" :loading="loading" size="small" @click="saveInterfaceInfo(interfaceForm)">保存</el-button>
        <router-link :to="{  name:'接口列表'}">
          <el-button type="warning" icon="el-icon-back" size="small">返回</el-button>
        </router-link>
      </el-row>
    </div>

  </div>
</template>

<script>
import {getGroupAll} from '@/api/group'
import {updateApi, getApiById} from "@/api/api";
import vueJsonEditor from 'vue-json-editor';
import jsonView from 'vue-json-views'
import {isEmpty, isNull} from "@/utils/baseUtils";
import dateFormat from "@/utils/dateFormat";

export default {
  data() {
    return {
      projectId: 1,
      interfaceForm: {
        id: 1,
        params: [],
      },
      method: '',
      tyle: 1,
      resultJson: {
        successJson: {
          "code": 200,
          "message": "success",
          "data": {"id": 1, "name": "用户管理", "description": null, "createTime": "2022-12-26 06:41:01", "updateTime": "2022-12-26 16:15:59", "projectId": 1}
        }
      },
      interfaceGroupList: [],
      loading: false
    }
  },
  methods: {
    addNewParams() {
      this.interfaceForm.params.push({
        name: '',
        must: '',
        remark: '',
        value: ''
      })
    },
    //编辑接口
    saveInterfaceInfo(interfaceForm) {
      this.loading = true
      if (isEmpty(interfaceForm.name)) {
        this.$message.warning("接口名称不能为空")
        this.loading = false
        return;
      }
      if (isEmpty(interfaceForm.apiGroupId)) {
        this.$message.warning("接口分组不能为空")
        this.loading = false
        return;
      }
      if (isEmpty(interfaceForm.version)) {
        this.$message.warning("版本号不能为空")
        this.loading = false
        return;
      }
      if (isEmpty(interfaceForm.status)) {
        this.$message.warning("接口状态不能为空")
        this.loading = false
        return;
      }
      if (isEmpty(interfaceForm.author)) {
        this.$message.warning("添加人员不能为空")
        this.loading = false
        return;
      }
      if (isEmpty(interfaceForm.protocol)) {
        this.$message.warning("接口协议不能为空")
        this.loading = false
        return;
      }
      if (isEmpty(interfaceForm.method)) {
        this.$message.warning("请求方法不能为空")
        this.loading = false
        return;
      }
      if (isEmpty(interfaceForm.path)) {
        this.$message.warning("接口路径不能为空")
        this.loading = false
        return;
      }
      interfaceForm.upTimeTime = dateFormat('YYYY-mm-dd HH:MM:SS', new Date())

      let data = JSON.parse(JSON.stringify(interfaceForm))
      data.params = isEmpty(data.params) ? [] : JSON.stringify(data.params)
      data.response = isEmpty(this.resultJson.successJson) ? "" : JSON.stringify(this.resultJson.successJson)
      updateApi(data).then(resp =>{
        if(resp.code===200){
          this.$message.success("保存成功")
          this.$router.push({
              name: '接口列表'
            })
        }
      })
      this.loading = false
    },
    //查询分组
    getAPiGroup(projectId) {
      this.interfaceGroupList = []
      getGroupAll(projectId).then(resp => {
        this.interfaceGroupList = resp.data
      })
    },

    getApi(id) {
      getApiById(id).then(resp =>{
      if (resp.code === 200){
        this.interfaceForm = resp.data
        this.interfaceForm.params = isNull(this.interfaceForm.params) ? [] :JSON.parse(resp.data.params)
      }
    })
    }
  },
  components: {
    vueJsonEditor
  },
  mounted() {
    this.getAPiGroup(this.projectId)
    this.getApi(this.interfaceForm.id)
  }
}
</script>
<style scoped>
.interface-edit >>> .el-input__inner {
  height: 33px;
}

.interface-title {
  clear: both;
  font-weight: 600;
  border-left: 3px solid #2395f1;
  padding-left: 8px;
  margin: 8px 0 0;
  padding-bottom: 3px;
}

.interface-edit >>> .jsoneditor-vue {
  height: 300px;
}
</style>
